<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes jindu{
            0%{
                transform: translate(-50px, 0);
            }
            100%{
                transform: translate(-0px, 0);
            }
        }
        /* @keyframes jindu{
            0%{

            }
            100%{
                height: 10px;
            }
        } */
        body{
            position: relative;
            height: 700px;
background: url(./vivo-banner-z3ys-bg.jpg) bottom center no-repeat;
        }
ul li{
    width: 50px;
    height: 2px;
    overflow: hidden;
    background-color: rgb(185, 183, 183);
    position: absolute;
    bottom: 20px;
left: 50%;
list-style: none;
    /* border: solid 2px ; */
}
ul li:nth-child(1){
    transform: translate(-90px, 0);
}
ul li:nth-child(3){
    
    transform: translate(0px, 0);
}
ul li:nth-child(2){
    height: 30px;
    width: 16px;
    background-color: rgb(11, 252, 252);
    transform: translate(-26px, 0);
}
/* ul{width: 140px;
    height: 10px;
   
    right: 50%;

} */
div{
    height: 5px;
width: 50px;
background-color: rgb(112, 112, 112);
/* position: absolute;
    bottom: 20px;
left: 50%;*/
} 
ul li:nth-child(1) div{
    transform: translate(-50px, 0);
    /* transition: 3s; */
}
ul li:nth-child(3) div{
    /* transition: 3s; */
    transform: translate(-50px, 0);
}
ul li:hover div{
    /* transform: translate(-0px, 0); */
    animation: jindu 3s;
}
ul li:hover{
    /* width: 10px; */
    height: 5px;
}
#shu:hover{
    height: 30px;
}
    </style>
</head>
<body>
    <ul>
        <li><div></div></li>
        <li id="shu"></li>
        <li><div></div></li>
    </ul>
</body>
</html>